<template>
	<view class="page">
		<view class="notice">
			<u-icon name="info-circle-fill" color="#AC9146" size="30" top="3" />
			<text>{{tip}}</text>
		</view>
		<view class="credentials-container">
			<view class="credentials">
				<!-- 如果将这个图片不写死  -->
				<image :src='idcard.idcardFront' class="bg"></image>
				<view class="cover">
					<image src="../static/filling/card.png" mode="widthFix" class="card"></image>
					<text class="desc">身份证正面</text>
					<ocr-navigator @onSuccess="scanIdcardFront" certificateType="idCard" :opposite="false">
						<button class="camera"></button>
					</ocr-navigator>
				</view>
			</view>
			<view class="credentials">
				<image :src="idcard.idcardBack" class="bg"></image>
				<view class="cover">
					<image src="../static/filling/card.png" mode="widthFix" class="card"></image>
					<text class="desc">身份证背面</text>
					<ocr-navigator @onSuccess="scanIdcardBack" certificateType="idCard" :opposite="true">
						<button class="camera"></button>
					</ocr-navigator>
				</view>
			</view>
			<view class="credentials">
				<image :src="idcard.idcardHolding" class="bg"></image>
				<view class="cover">
					<image src="../static/filling/card.png" mode="widthFix" class="card"></image>
					<text class="desc">手持身份证</text>
					<button class="camera" @tap="takePhoto('idcardHolding')"></button>
				</view>
			</view>
			<view class="credentials">
				<image :src="drcard.drcardFront" class="bg"></image>
				<view class="cover">
					<image src="../static/filling/card.png" mode="widthFix" class="card"></image>
					<text class="desc">驾驶证正面</text>
					<ocr-navigator @onSuccess="scanDrcardFront" certificateType="driverslicense">
						<button class="camera"></button>
					</ocr-navigator>
				</view>
			</view>
			<view class="credentials">
				<image :src="drcard.drcardBack" class="bg"></image>
				<view class="cover">
					<image src="../static/filling/card.png" mode="widthFix" class="card"></image>
					<text class="desc">驾驶证背面</text>
					<ocr-navigator @onSuccess="scanDrcardBack" certificateType="driverslicense">
						<button class="camera"></button>
					</ocr-navigator>
					<!-- <button class="camera" @tap="takePhoto('drcardBack')"></button> -->
				</view>
			</view>
			<view class="credentials">
				<image :src="drcard.drcardHolding" class="bg"></image>
				<view class="cover">
					<image src="../static/filling/card.png" mode="widthFix" class="card"></image>
					<text class="desc">手持驾驶证</text>
					<button class="camera" @tap="takePhoto('drcardHolding')"></button>
				</view>
			</view>
		</view>

		<view class="title">个人信息</view>
		<view class="list">
			<u-cell-group border="false">
				<u-cell-item title="真实姓名" :value="idcard.name" :value-style="style" :arrow="false" />
				<u-cell-item title="性别" :value="idcard.gender" :value-style="style" :arrow="false" />
				<u-cell-item title="生日" :value="idcard.birthday" :value-style="style" :arrow="false" />
				<u-cell-item title="身份证号" :value="idcard.idNumber" :value-style="style" :arrow="false" />
				<u-cell-item title="身份证地址" :value="idcard.idcardAddress.substr(0,10)+'...'" :value-style="style" />
				<u-cell-item title="身份证有效期" :value="idcard.idcardExpire" :value-style="style" :arrow="false" />
			</u-cell-group>
		</view>
		<view class="title">联系方式</view>
		<view class="list">
			<u-cell-group border="false">
				<u-cell-item title="手机号码" :value="contact.phone" :value-style="style"
					@click="enterContent('手机号码', 'phone')" />
				<u-cell-item title="电子信箱" :value="contact.email" :value-style="style"
					@click="enterContent('电子信箱', 'email')" />
				<u-cell-item title="收信地址" :value="contact.mailAddress  " :value-style="style"
					@click="enterContent('收信地址', 'mailAddress')" />
				<u-cell-item title="紧急联系人" :value="contact.contactName" :value-style="style"
					@click="enterContent('紧急联系人', 'contactName')" />
				<u-cell-item title="紧急联系人电话" :value="contact.contactPhone" :value-style="style"
					@click="enterContent('紧急联系人电话', 'contactPhone')" />
			</u-cell-group>
		</view>
		<view class="title">驾驶证</view>
		<view class="list">
			<u-cell-group border="false">
				<u-cell-item title="驾驶证类型" :value="drcard.carClass" :value-style="style" :arrow="false" />
				<u-cell-item title="驾驶证有效期" :value="drcard.drcardExpire" :value-style="style" :arrow="false" />
				<u-cell-item title="初次领证日期" :value="drcard.drcardIssueDate" :value-style="style" :arrow="false" />
			</u-cell-group>
		</view>

		<!-- <button class="btn" @tap="save" :disabled="realAuthStatus == 3">保存信息</button> -->
		<button class="btn" :disabled="realAuthStatus == 0 || realAuthStatus == 1" @tap="save">
			<text v-if="realAuthStatus == 0">审核中</text>
			<text v-else-if="realAuthStatus == 1">审核通过</text>
			<text v-else-if="realAuthStatus == 2">重新提交审核</text>
			<text v-else-if="realAuthStatus == 3">重新提交审核</text>
			<text v-else>提交实名</text>
		</button>
		<view class="remark">您每次提交实名信息之后，都需要工作人员严格审查，请等候1~3天，这期间您将无法接单，特此声明！</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	let dayjs = require('dayjs');
	export default {
		data() {
			return {
				//提示信息
				tip: null,
				//
				realAuthStatus: null,
				mode: 'fill',
				style: {
					color: '#FF9900'
				},
				//证件背景：用作小程序预览
				cardBackground: [
					'../static/filling/credentials-bg.jpg',
					'../static/filling/credentials-bg.jpg',
					'../static/filling/credentials-bg.jpg',
					'../static/filling/credentials-bg.jpg',
					'../static/filling/credentials-bg.jpg',
					'../static/filling/credentials-bg.jpg'
				],
				//这是双向绑定的数据
				idcard: {
					//身份证ID
					idNumber: '',
					name: '',
					gender: '',

					idcardAddress: '',
					//地址 这个地址是不存在的
					// shortAddress: '',
					//生日
					birthday: '',
					//过期时间
					idcardExpire: '',
					//身份证正面:云地址
					idcardFront: '../static/filling/credentials-bg.jpg',
					//身份证背面:云地址
					idcardBack: '../static/filling/credentials-bg.jpg',
					//手持身份证:云地址
					idcardHolding: '../static/filling/credentials-bg.jpg'
				},
				//联系人
				contact: {
					//手机号
					phone: '18244229577',
					//电子邮件
					email: '18244229577@qq.com',
					//短邮箱
					shortEmail: '18244229577@qq.com',
					//收信地址
					mailAddress: '广州市xx区xx乡镇',
					//短地址
					shortMailAddress: '广州市xx区xx乡镇',
					//联系人
					contactName: '阿崔',
					//联系电话
					contactPhone: '18244229577'
				},
				//驾驶证
				drcard: {
					//颁发时间
					drcardIssueDate: '',
					//驾驶证类型
					carClass: '',
					//驾驶证过期时间
					drcardExpire: '',
					//驾驶证正面:云地址
					drcardFront: '../static/filling/credentials-bg.jpg',
					//驾驶证背面:云地址
					drcardBack: '../static/filling/credentials-bg.jpg',
					//手持驾驶证:云地址
					drcardHolding: '../static/filling/credentials-bg.jpg'
				},
				//记录所有云文件地址，用作删除
				allCosImg: [],
				//保存有效的文件地址
				currentCosImg: [],
				realAuth: uni.getStorageSync('realAuth')
			};
		},
		methods: {

			//抽离成一个方法
			// uploadPhotoToCos(assignmentObject,image_path){
			// 	debugger
			// 	let _this = this;
			// 	_this.uploadCos("/common/app/file/cos-upload",image_path, (result) => {
			// 		let data = JSON.parse(result.data);
			// 		if (data.success) {
			// 			assignmentObject.assignmentPhoto = data.data;
			// 		} else {
			// 			uni.showToast({
			// 				duration: 2000,
			// 				title: data.message,
			// 				icon: "error"
			// 			})
			// 		}
			// 	})
			// },
			//提交认证材料
			save() {
				let _this = this;
				//对象的解构和...对象的展开运算符
				let param = {
					..._this.idcard,
					..._this.contact,
					..._this.drcard,
				}

				//前端的参数检验 是针对客户端的校验
				for (let key in param) {
					if (param[key] == '') {
						//显示消息提示框
						uni.showToast({
							//提示的延时时间
							duration: 2000,
							//提示的内容、标题
							title: "信息不能为空",
							//图标
							icon: "error",
						})
					}
				};
				// for (let key in _this.contact) {
				// 	if (_this.contact[key] == '') {
				// 		uni.showToast({
				// 			duration: 2000,
				// 			title: "信息不能为空",
				// 			icon: "error",
				// 		})
				// 	}
				// };
				// for (let key in _this.drcard) {
				// 	if (_this.drcard[key] == '') {
				// 		uni.showToast({
				// 			duration: 2000,
				// 			title: "身份证信息不能为空",
				// 			icon: "error",
				// 		})
				// 	}
				// };
				// let param = Object.assign({}, _this.idcard, _this.contact, _this.drcard);
				// let param = {
				// 	..._this.idcard,
				// 	..._this.contact,
				// 	..._this.drcard,
				// }
				console.log(param);

				_this.post("/driver/app/driver/realNameAuth", param, (result) => {
					//使用解构表达式将返回的结果赋值给message,data,success,code这几个变量
					console.log("进入到实名认证，后端返回的数据" + result.data);
					let {
						message,
						success,
						code,
					} = result.data;

					if (success) {

						// console.log("提交认证成功等待审核");
						uni.navigateBack();
					} else {
						uni.showToast({
							duration: 2000,
							title: message,
							icon: "error",
						})
					}
				})
			},
			//输入联系人信息
			enterContent(title, field) {
				let _this = this;
				uni.showModal({
					title: "请输入 " + title,
					editable: true,
					// content:_this.contact[field],
					content: "",
					success(res) {
						_this.contact[field] = res.content;
					}
				})
			},
			//手持身份证拍照
			takePhoto(type) {
				//跳转拍照页面
				uni.navigateTo({
					url: "../identity_camera/identity_camera?type=" + type
				})
			},
			//拍照页面图片回传
			uploadPhoto(type, photoPath) {
				let _this = this;
				_this.uploadCos("/common/app/file/cos-upload", photoPath, (result) => {
					debugger;
					let data = JSON.parse(result.data);
					if (data.success) {
						if ("idcardHolding" == type) {
							_this.idcard.idcardHolding = data.data;
						} else if ("drcardHolding" == type) {
							_this.drcard.drcardHolding = data.data;
						}
					} else {
						uni.showToast({
							duration: 2000,
							title: data.message,
							icon: "error"
						})
					}
				})

				// if ("idcardHolding" == type) {
				// 	_this.idcard.idcardHolding = photoPath;
				// } else if ("drcardHolding" == type) {
				// 	_this.drcard.drcardHolding = photoPath;
				// }
			},
			//驾驶证正面
			scanDrcardFront(res) {
				//这个this
				let _this = this;
				let result = res.detail;
				let image_path = result.image_path;

				_this.drcard.carClass = result.car_class.text;
				_this.drcard.drcardIssueDate = result.valid_from.text;
				_this.drcard.drcardExpire = result.valid_to.text;
				//如何抽离一个方法
				// _this.uploadPhotoToCos(assignmentObject,image_path);
				//
				_this.uploadCos("/common/app/file/cos-upload", result.image_path, (result) => {
					let data = JSON.parse(result.data);
					if (data.success) {
						_this.drcard.drcardFront = data.data;
					} else {
						uni.showToast({
							duration: 2000,
							title: data.message,
							icon: "error"
						})
					}
				})
			},
			//驾驶证背面
			scanDrcardBack(res) {
				let _this = this;
				let result = res.detail;

				_this.uploadCos("/common/app/file/cos-upload", result.image_path, (result) => {
					let data = JSON.parse(result.data);
					// debugger
					if (data.success) {
						_this.drcard.drcardBack = data.data;
					} else {
						uni.showToast({
							duration: 2000,
							title: data.message,
							icon: "error"
						})
					}

				})

			},
			//身份证背面识别
			scanIdcardBack(res) {
				let _this = this;
				let result = res.detail;
				let expireDate = result.valid_date.text.split("-")[1];
				let formatDate = dayjs(expireDate).format("YYYY-MM-DD");
				_this.idcard.idcardExpire = formatDate;
				let image_path = result.image_path;
				// _this.uploadPhotoToCos(_this.drcard.drcardBack,image_path);
				_this.uploadCos("/common/app/file/cos-upload", result.image_path, (result) => {
					let data = JSON.parse(result.data);
					// debugger
					if (data.success) {
						_this.idcard.idcardBack = data.data;
					} else {
						uni.showToast({
							duration: 2000,
							title: data.message,
							icon: "error"
						})
					}
				})
			},
			//身份证识别回调
			scanIdcardFront(res) {
				let _this = this;
				let result = res.detail;
				// console.log(result.id.text);
				//将数据进行双向绑定
				_this.idcard.idNumber = result.id.text;
				_this.idcard.name = result.name.text;
				_this.idcard.gender = result.gender.text;
				_this.idcard.idcardAddress = result.address.text;
				_this.idcard.birthday = result.birth.text;
				//发起请求到后端 
				// _this.uploadPhotoToCos(_this.idcard.idcardFront);
				_this.uploadCos("/common/app/file/cos-upload", result.image_path, (result) => {
					let data = JSON.parse(result.data);

					if (data.success) {
						_this.idcard.idcardFront = data.data;
					} else {
						uni.showToast({
							duration: 2000,
							title: data.message,
							icon: "error"
						})
					}
				})
			},
			//文件上传
			uploadFile(imagePath, num, callback) {
				let _this = this;
			},
			//加载司机的实名信息 需要查询数据库
			loadDriverAuthMaterial() {
				let _this = this;
				//获取当前司机的数据，不能直接调用"/manager/driverAuthMaterial/pageList"
				_this.post("/driver/app/driver/getYourselfAuthMaterial", (result) => {

					let {
						success,
						code,
						data,
						message
					} = result.data;
					if (success) {
						//将查询到数据分别赋值给对应data()方法中的idcard对象、contact对象、drcard对象
						Object.assign(_this.idcard, data);
						Object.assign(_this.contact, data);
						Object.assign(_this.drcard, data);
						//后端中data属性比idcard/contact/drcard 三个加起来还要多 realAuthStatus认证状态
						_this.realAuthStatus = data.realAuthStatus;

						if (data.realAuthStatus == 0) {
							_this.tip = "正在审核"
						} else if (data.realAuthStatus == 1) {
							_this.tip = "审核通过"
						} else if (data.realAuthStatus == 2) {
							_this.tip = "审核失败，失败原因" + data.auditRemark;
						} else if (data.realAuthStatus == 3) {
							_this.tip = "审核撤销，撤销原因" + data.auditRemark;
						}

					} else {
						uni.showToast({
							duration: 2000,
							title: "查询失败",
							icon: "error",
						})
					}
				})
			}
		},
		//获取上个页面传入的参数
		onLoad: function(options) {
			console.log(options.driverId);
		},
		onShow() {
			let _this = this;
			_this.loadDriverAuthMaterial();
		}
	};
</script>

<style lang="less">
	@import url('filling.less');
</style>